<template>
	<view class="content">
		<view class="logo">
			<view v-if="!logined" class="name-box">
				<image src="../../static/center/touxiang.png"></image>
				<navigator url="../../pages/center/login" class="names">登录</navigator>
			</view>
			<view v-if="logined" class="name-box">
				<image :src="switchIcon(userinfo.icon)"></image>
				<view style="margin-left: 10rpx;">
					<view class="names" @click="updateName(userinfo.usersName)">{{userinfo.usersName}}</view>
					<view @click="goJifenRecord()" style="padding-top: 16rpx;">积分：<span id="jifen">{{userinfo.usersIntegral}}</span></view>
				</view>
			</view>
			<view class="name-box" @click="download()">
				<image src="../../static/center/xz.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="order-box">
			<view class="all-order">
				<view class="tips">商品订单</view>
				<view class="all-order2">
					<view style="color: red;" @click="goOrders(0)">查看全部订单</view>
					<image src="../../static/center/gd.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="order-types-box">
				<view class="types-item" @click="goOrders(1)">
					<image src="../../static/center/dfk2.png" mode="widthFix"></image>
					<view>待付款</view>
					<view class="badge" v-if="weifukuanNum>0">{{weifukuanNum}}</view>
				</view>
				<view class="types-item"  @click="goOrders(2)">
					<image src="../../static/center/dfh2.png" mode="widthFix"></image>
					<view>待发货</view>
					<view class="badge" v-if="weifahuoNum>0">{{weifahuoNum}}</view>
				</view>
				<view class="types-item"  @click="goOrders(3)">
					<image src="../../static/center/dsh2.png" mode="widthFix"></image>
					<view>待收货</view>
					<view class="badge" v-if="weishouhuoNum>0">{{weishouhuoNum}}</view>
				</view>
				<view class="types-item" @click="goRefund()">
					<image src="../../static/center/tuihuo2.png" mode="widthFix"></image>
					<view>退换货</view>
					<view class="badge" v-if="thhcount>0">{{thhcount}}</view>
				</view>
			</view>
		</view>
		<!-- 会员品牌 -->
		<view class="order-box">
			<view class="all-order">
				<view class="tips">会员品牌</view>
				<view class="all-order2">
					<view style="color: red;" @click="allPinpai()">查看全部品牌</view>
					<image src="../../static/center/gd.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="tui-box">
				<view class="tui-item" v-for="(item,i) in pinpaiList" :key="item.id" @click="goPinpaiDetail(item.ppPingpai.id)">
					<image :src="switchImg(item.ppPingpai.logo)" class="img"></image>
					<view class="gname">{{item.ppPingpai.name}}</view>
					<!-- <view class="jiage">{{item.price}}</view> -->
				</view>
			</view>
		</view>
		<!-- 选项片 -->
		<view class="shouhuo-box" style="padding-bottom: 130rpx;">
			<view class="item" @click="zitidianShenqing()">
				<view>
					<image src="../../static/center/shenqingziti.png" mode="widthFix" class="icons"></image>
					<text>自提点申请</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="zitiAddress()">
				<view>
					<image src="../../static/center/zitilocate.png" mode="widthFix" class="icons"></image>
					<text>我的自提位置</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="shouHuo()">
				<view>
					<image src="../../static/center/wz.png" mode="widthFix" class="icons"></image>
					<text>收货地址</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="kaitong()">
				<view>
					<image src="../../static/center/hezuo2.png" mode="widthFix" class="icons"></image>
					<text>开通联盟积分商城</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="loginOut()" v-show="logined">
				<view>
					<image src="../../static/center/zx.png" mode="widthFix" class="icons"></image>
					<text>用户注销</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false" @change="tab"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;" @click="tabbarPage(0)">
				<uni-icons type="home" size="20"></uni-icons>
				<view>品牌共享</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="list" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(2)">
				<uni-icons type="cart" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="person" color="#FF7900" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from 'vuex'
	export default {
		data() {
			return {
				// 底部tab
				list:[
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '品牌共享',
						customIcon: false,
						pagePath: "/pages/pinpai/index"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/pinpai/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/pinpai/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/pinpai/center/center"
					},
				],
				current:4,
				logined:false,	// 是否登录
				userinfo:[],	// 用户信息
				pinpaiList:[],	// 会员品牌
				weifukuanNum:0,	// 订单未付款数量
				weifahuoNum:0,  // 订单未发货数量
				weishouhuoNum:0,// 订单未收货数量
				thhcount:0,		// 退换货数量
			}
		},
		onLoad() {
			this.checkPinpaiUserInfo();
			uni.$on("checkPinpaiUserInfo",this.checkPinpaiUserInfo);
			this.getPinpaiOrderByGroup();
			uni.$on("getPinpaiOrderByGroup",this.getPinpaiOrderByGroup);
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==0?'../index':(index==1?'../goods/goodsFenlei':'../cart/cart')
				})
			},
			//app下载
			download(){
				uni.navigateTo({
					url:'../../pages/center/download?type=2'
				})
			},
			//查看积分记录
			goJifenRecord(){
				uni.navigateTo({
					url:'../../pages_jifen/center/jifenZhuanRang'
				})
			},
			//修改用户名
			updateName(usersName){
				uni.navigateTo({
					url:'../../pages_jifen/center/updateName?usersName='+usersName
				})
			},
			// 跳转到退换货记录页面
			goRefund(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'../refund/refundList'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			tab(e){
				this.current = e;
			},
			// 加载用户信息
			checkPinpaiUserInfo(){
				var usersId = uni.getStorageSync("usersId");
				if(usersId!=null && usersId!="" && usersId!=undefined){
					this.logined=true;
					this.userinfo=uni.getStorageSync("userinfo");
					this.$http.get('/ppUserPingpai/searchUserPingpai', {
						userId:uni.getStorageSync("usersId")
					}).then(res => {
						if(res.data.code==200){
							this.pinpaiList = [];
							if(res.data.data.length > 3){
								for(let xyz=0;xyz<3;xyz++){
									this.pinpaiList = this.pinpaiList.concat(res.data.data[xyz])
								}
							}else{
								this.pinpaiList = res.data.data;
							}
							// console.log("用户会员品牌个数："+this.pinpaiList.length)
							// console.log(this.pinpaiList)
						}
					});
				}else{
					this.logined=false;
				}
			},
			// 跳转到订单列表页面
			goOrders(n){
				uni.navigateTo({
					url:'../order/orders?index='+n
				})
			},
			//品牌图片
			switchImg(image){
				if(image.length>0){
					return this.host+'/image/pingpaiLogo/'+image;
				}else{
					return '../../static/index/gm.png';
				}
			},
			//用户头像
			switchIcon(icon){
				if(this.isNull(icon)){
					let xcxIcon = uni.getStorageSync('xcxIcon');
					if(this.isNull(xcxIcon)){
						return '../../static/center/touxiang.png';
					}
					return xcxIcon;
				}else{
					return this.host+icon;
				}
			},
			// 点击查看全部品牌
			allPinpai(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myAllPinpai'
					})
				}else{
					uni.navigateTo({
						url:'../pinpai/pinpaiList'
					})
				}
			},
			// 查看品牌详情
			goPinpaiDetail(ppId){
				uni.navigateTo({
					url:'../pinpai/pinpaiDetail?ppid='+ppId
				})
			},
			// 跳转自提点申请页面
			zitidianShenqing(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'zitidianShenQing'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			// 跳转我的自提位置
			zitiAddress(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'myZitiAddress'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			// 跳转开通联盟积分商城
			kaitong(){
				if(uni.getStorageSync('logined')){
					uni.navigateTo({
						url:'loginGzh'
					})
				}else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			// 跳转到收货地址
			shouHuo(){
				if(uni.getStorageSync('logined'))
					uni.navigateTo({
						url:'../../pages/center/shouHuo?from=1'
					})
				else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			// 订单分组个数
			getPinpaiOrderByGroup(){
				this.weifahuoNum=0;
				this.weifukuanNum=0;
				this.weishouhuoNum=0;
				let uid = uni.getStorageSync("usersId")	;
				if(uid!=null && uid!="" && uid!=undefined){
					this.$http.get('/ppOrder/getorderfenzu', {//查询订单分组个数
						userid:uid
					}).then(res => {
						if(res.data.code==200){
							if(res.data.data.length>0){
								for(let i=0,len=res.data.data.length;i<len;i++){
									if(res.data.data[i].orStatus==0){
										this.weifukuanNum=res.data.data[i].geshu;
									}else if(res.data.data[i].orStatus==1){
										this.weifahuoNum=res.data.data[i].geshu;
									}else if(res.data.data[i].orStatus==2){
										this.weishouhuoNum = res.data.data[i].geshu;
									}
								}
							}
						}
					});
					this.$http.get('/ppRefund/getrefunding',{//查询退换货个数
						userid:uid
					}).then(res => {
						if(res.data.code==200){
							this.thhcount = res.data.count
						}
					})
				}
			},
			// 注销
			loginOut(){
				uni.showModal({
					title:'退出登录?',
					success:(res)=> {
						if(res.confirm){
							this.pinpaiList = [];
							uni.removeStorageSync("usersId");
							uni.removeStorageSync("userinfo");
							uni.setStorageSync("logined",false);
							this.logined = false;
							this.$store.state.logined=false;
							this.$store.state.user=null;
							this.getPinpaiOrderByGroup();
							this.checkPinpaiUserInfo();
							uni.$emit("checkCart");				//携联商城购物车
							uni.$emit("checkUserInfo");			//携联商城个人中心加载用户数据
							uni.$emit('getOrderByGroup');		//携联商城个人中心加载订单数量
							uni.$emit('getJifenCenter');		//积分商城个人中心
							uni.$emit('getJifenCat');			//积分商城购物车
							uni.$emit('init');					//品牌共享首页数据（商品价格）
							uni.$emit('getXingyunUserInfo');	//幸运商城个人中心加载用户数据
						}else if(res.cancel){
							
						}
					}
				})
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style lang="scss" scoped>
	#jifen{
		padding: 2px 3px;
		background-color: red;
		color: white;
		border-radius: 4px;
	}
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	.logo{
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background-color: white;
		margin: 20rpx auto;
	}
	.logo .names{
		color: #111111;
		font-weight: bold;
	}
	.logo .name-box{
		display: flex;
		align-items: center;
	}
	.logo image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	.order-box,.shouhuo-box{
		padding: 20rpx 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
	}
	.order-box .tips{
		font-size: 30rpx;
		font-weight: bold;
	}
	.order-box .all-order,.all-order2{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.order-box .all-order{
		padding-bottom:20rpx ;
		border-bottom: 1px solid #ccc;
	}
	.order-box .all-order navigator{
		color: red;
	}
	.order-box .all-order image{
		width: 10rpx;
		margin-left: 20rpx;
	}
	.order-types-box{
		display: flex;
		padding-top: 30rpx;
		justify-content: space-around;
	}
	.types-item image{
		width: 90rpx;
	}
	.types-item{
		position: relative;
	}
	.types-item .badge{
		position: absolute;
		top: 10rpx; 
		right: 0rpx;
		background-color: red;
		color: white;
		width: 25rpx;
		height: 25rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
	}
	.order-box .all-order .huo{
		width: 30rpx;
		vertical-align: middle;
		position: relative;
		right: 20rpx;
	}
	.tui-box{
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
	}
	.tui-box .gname{
		margin: 10rpx auto;
		font-size: 24rpx;
		overflow: hidden;
		color: #8f8f94;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tui-box .img{
		width: 120rpx;
		height: 120rpx;
		border-radius: 90rpx;
	}
	.tui-box .tui-item{
		width: 25%;
		text-align: center;
		// padding: 10rpx;
	}
	.tui-box .jiage{
		background-color: red;
		color: #FFFFFF;
		border-radius: 40rpx;
		width: 80%;
		margin: auto;
		padding: 2px 0px;
		font-size: 22rpx;
		text-align: center;
	}
	.shouhuo-box>.item{
		display: flex;
		padding: 20rpx 20rpx;
		justify-content: space-between;
	}
	.shouhuo-box .icons{
		width: 30rpx;
		margin-right: 20rpx;
	}
	.shouhuo-box .gduo{
		width: 10rpx;
	}
</style>
